<!doctype html>
<html>
    <head>
        <meta charset="utf-8">

        <title>InkJS - Modal samples</title>

        <link rel="stylesheet" href="../../../../../../dist/css/ink.css">
        
        <!--[if IE 7 ]>
            <link rel="stylesheet" href="../../../../../../dist/css/ink.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <![endif]-->

        <script type="text/javascript" src="../../../../Ink/1/lib.js"></script>
        <script>
            Ink.setPath('Ink', '../../../../Ink/');
        </script>

        <script type="text/javascript" src="../../../../../../dist/js/prettify.js"></script>
        <style>
            pre.prettyprint{
                font-size: 0.75em;
            }
        </style>
    </head>

    <body onload="prettyPrint()">
        <nav class="ink-navigation ink-container">
            <ul class="menu horizontal black flat">
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
        </nav>
        <div class="ink-container ink-grid">
            <h1>Modal Samples - InkJS</h1>

            <section>
                <header>
                    <h2>Open the modal on page load</h2>
                </header>
                <p>
                    <pre class="prettyprint linenums">
&lt;div class="ink-shade fade"&gt;
    &lt;div id="displayOnStart" class="ink-modal fade" data-width="80%" data-height="60%" role="dialog" aria-hidden="true" aria-labelled-by="modal-title"&gt;
        &lt;div class="modal-header"&gt;
            &lt;button class="modal-close ink-dismiss"&gt;&lt;/button&gt;
            &lt;h5 id="modal-title"&gt;This Modal is dislayed as soon as the page is fully available&lt;/h5&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
            &lt;h3&gt;Please confirm your previous choice&lt;/h3&gt;
            &lt;p&gt;"No," said Peleg, "and he hasn't been baptized right either, or it would have washed some of that devil's blue off his face."&lt;/p&gt;
            &lt;p&gt;
                &lt;img src="http://placehold.it/800x400" style="width: 100%;" alt=""&gt;
            &lt;/p&gt;
            &lt;p&gt;"Do tell, now," cried Bildad, "is this Philistine a regular member of Deacon Deuteronomy's meeting? I never saw him going there, and I pass it every Lord's day."&lt;/p&gt;
            &lt;p&gt;"I don't know anything about Deacon Deuteronomy or his meeting," said I; "all I know is, that Queequeg here is a born member of the First Congregational Church. He is a deacon himself, Queequeg is."&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
            &lt;div class="push-right"&gt;
                &lt;button class="ink-button blue"&gt;Confirm&lt;/button&gt;
                &lt;button class="ink-button red ink-dismiss"&gt;Cancel&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
    // Unnecessary with autoload.js
    Ink.requireModules(['Ink.UI.Modal_1'],function(Modal){
        var myFirstModal = new Modal('#displayOnStart');
    });
&lt;/script&gt;
</pre>
                </p>

                <div class="ink-shade fade">
                    <div id="displayOnStart" class="ink-modal fade" data-width="80%" data-height="60%" role="dialog" aria-hidden="true" aria-labelled-by="modal-title">
                        <div class="modal-header">
                            <button class="modal-close ink-dismiss"></button>
                            <h5 id="modal-title">This Modal is dislayed as soon as the page is fully available</h5>
                        </div>
                        <div class="modal-body">
                            <h3>Please confirm your previous choice</h3>
                            <p>"No," said Peleg, "and he hasn't been baptized right either, or it would have washed some of that devil's blue off his face."</p>
                            <p>
                                <img src="http://placehold.it/800x400" style="width: 100%;" alt="">
                            </p>
                            <p>"Do tell, now," cried Bildad, "is this Philistine a regular member of Deacon Deuteronomy's meeting? I never saw him going there, and I pass it every Lord's day."</p>
                            <p>"I don't know anything about Deacon Deuteronomy or his meeting," said I; "all I know is, that Queequeg here is a born member of the First Congregational Church. He is a deacon himself, Queequeg is."</p>
                        </div>
                        <div class="modal-footer">
                            <div class="push-right">
                                <button class="ink-button blue">Confirm</button>
                                <button class="ink-button red ink-dismiss">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>

                <script type="text/javascript">
                    // Unnecessary with autoload.js
                    Ink.requireModules(['Ink.UI.Modal_1'],function(Modal){
                        var myFirstModal = new Modal('#displayOnStart');
                    });
                </script>

            </section>

            <section>
                <header>
                    <h2>A modal and a button to trigger it</h2>
                </header>
                <p>
                    <button id="myTrigger">Open Modal</button>
                    <pre class="prettyprint linenums">
&lt;div class="ink-shade fade"&gt;
    &lt;div id="displayOnBtnClick" class="ink-modal fade" data-trigger="#myTrigger" data-width="800px" data-height="400px" role="dialog" aria-hidden="true" aria-labelled-by="modal-title"&gt;
        &lt;div class="modal-header"&gt;
            &lt;button class="modal-close ink-dismiss"&gt;&lt;/button&gt;
            &lt;h5 id="modal-title"&gt;This is a different modal&lt;/h5&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
            Different!!! Opened by a button and filled dynamically!
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
    Ink.requireModules(['Ink.UI.Modal_1'], function(Modal){
        var mySecondModal = new Modal('#displayOnBtnClick');
    });
&lt;/script&gt;
</pre>
                </p>
                <div class="ink-shade fade">
                    <div id="displayOnBtnClick" class="ink-modal fade" data-trigger="#myTrigger" data-width="800px" data-height="400px" role="dialog" aria-hidden="true" aria-labelled-by="modal-title">
                        <div class="modal-header">
                            <button class="modal-close ink-dismiss"></button>
                            <h5 id="modal-title">This is a different modal</h5>
                        </div>
                        <div class="modal-body">
                            Different!!! Opened by a button and filled dynamically!
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    Ink.requireModules(['Ink.UI.Modal_1'], function(Modal){
                        var mySecondModal = new Modal('#displayOnBtnClick');
                    });
                </script>
            </section>

            <section>
                <header>
                    <h2>Construct a modal with HTML through JavaScript</h2>
                </header>
                <p>
                    <button id="codeTrigger">Open Modal</button>
                    <pre class="prettyprint linenums">
&lt;script type="text/javascript"&gt;
    Ink.requireModules(['Ink.Dom.Event_1','Ink.UI.Modal_1'],function(InkEvent,Modal){
        var mySecondModal = new Modal('#displayOnBtnClick');

        InkEvent.observe( Ink.s('#codeTrigger'), 'click', function( event ){
            InkEvent.stopDefault(event);

            var myThirdModal = new Modal(null,{
                width: '600px',
                height: '400px',
                shadeClass: 'myShadeClass myOtherShadeClass',
                modalClass: 'myModalClass myOtherModalClass',
                markup: '&lt;div class="modal-header"&gt;&lt;button class="modal-close ink-dismiss"&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="modal-body"&gt;Stuff&lt;/div&gt;'
            });
        });
    });
&lt;/script&gt;
</pre>
                </p>

                <script type="text/javascript">
                    Ink.requireModules(['Ink.Dom.Event_1','Ink.UI.Modal_1'],function(InkEvent,Modal){
                        InkEvent.observe( Ink.s('#codeTrigger'), 'click', function( event ){
                            InkEvent.stopDefault(event);

                            var myThirdModal = new Modal(null,{
                                width: '600px',
                                height: '400px',
                                shadeClass: 'myShadeClass myOtherShadeClass',
                                modalClass: 'myModalClass myOtherModalClass',
                                markup: '<div class="modal-header"><button class="modal-close ink-dismiss"></button></div><div class="modal-body">Stuff</div>'
                            });

                        });
                    });
                </script>
            </section>

            <section>
            	<header>
                    <h2>Open a modal manually through JavaScript</h2>
                </header>
            	<p>
                    <button id="openDisplayLaterModal">Open Modal</button>
                    <pre class="prettyprint linenums">
&lt;div class="ink-shade fade"&gt;
    &lt;div id="displayLater" class="ink-modal fade" data-width="800px" data-height="400px" role="dialog" aria-hidden="true" aria-labelled-by="modal-title"&gt;
        &lt;div class="modal-header"&gt;
            &lt;button class="modal-close ink-dismiss"&gt;&lt;/button&gt;
            &lt;h5 id="modal-title"&gt;Created after constructing the &lt;code&gt;Modal&lt;/code&gt; object&lt;/h5&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
            &lt;p&gt;Opened using the &lt;code&gt;open()&lt;/code&gt; method. Add the &lt;code&gt;autoDisplay:false&lt;/code&gt; option to avoid opening when the page loads.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
    Ink.requireModules(['Ink.UI.Modal_1', 'Ink.Dom.Event_1'], function (Modal, InkEvent) {
        var openLater = new Modal('#displayLater', { autoDisplay: false });

        InkEvent.observe( Ink.s('#openDisplayLaterModal'), 'click', function ( event ) {
            // Opening the modal when we damn well please
            setTimeout(function () {
                openLater.open();
            }, 1000);
        });
    });
&lt;/script&gt;
</pre>
                </p>
                <div class="ink-shade fade">
                    <div id="displayLater" class="ink-modal fade" data-width="800px" data-height="400px" role="dialog" aria-hidden="true" aria-labelled-by="modal-title">
                        <div class="modal-header">
                            <button class="modal-close ink-dismiss"></button>
                            <h5 id="modal-title">Created after constructing the <code>Modal</code> object</h5>
                        </div>
                        <div class="modal-body">
                            <p>Opened using the <code>open()</code> method. Add the <code>autoDisplay:false</code> option to avoid opening when the page loads.</p>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    Ink.requireModules(['Ink.UI.Modal_1', 'Ink.Dom.Event_1'], function (Modal, InkEvent) {
                        var openLater = new Modal('#displayLater', { autoDisplay: false });
                        InkEvent.observe( Ink.s('#openDisplayLaterModal'), 'click', function ( event ) {
                            // Opening the modal when we damn well please
                            setTimeout(function () {
                                openLater.open();
                            }, 1000);
                        });
                    });
                </script>
            </section>


            <section>
                <h1>Stuff you can put in your modal</h1>

            	<p>
                    <pre class="prettyprint linenums">
&lt;div class="ink-shade fade"&gt;
    &lt;div id="modalWithStuff" class="ink-modal fade" data-width="80%" data-height="80%" data-trigger="#openModalWithStuffs" role="dialog" aria-hidden="true" aria-labelled-by="modal-title"&gt;
        &lt;div class="modal-header"&gt;
            &lt;button class="modal-close ink-dismiss"&gt;&lt;/button&gt;
            &lt;h5 id="modal-title&gt;This Modal is dislayed as soon as the page is fully available&lt;/h5&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
            &lt;h1&gt;A tooltip&lt;/h1&gt;

            &lt;span class="ink-tooltip" data-tip-text="A tooltip!!!!1"&gt;A tooltip!&lt;/span&gt;

            &lt;hr&gt;

            &lt;h1&gt;A video&lt;/h1&gt;
            &lt;iframe src="http://rd3.videos.sapo.pt/playhtml?file=http://rd3.videos.sapo.pt/hhl0qEyhOad0aNrZYGvQ/mov/1&amp;quality=sd" frameborder="0" scrolling="no" width="640" height="360"&gt;&lt;/iframe&gt;
            &lt;hr&gt;

            &lt;h1&gt;A datepicker&lt;/h1&gt;

            &lt;input class="ink-datepicker" type="text"&gt;

            &lt;hr&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
            &lt;div class="push-right"&gt;
                &lt;button class="ink-button blue"&gt;Confirm&lt;/button&gt;
                &lt;button class="ink-button red ink-dismiss"&gt;Cancel&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;button id="openModalWithStuffs"&gt;Open Modal&lt;/button&gt;

&lt;script&gt;
    Ink.requireModules(['Ink.UI.Modal_1'], function (Modal) {
        new Modal('#modalWithStuff');
    });
&lt;/script&gt;
                    </pre>
                </p>

                <div class="ink-shade fade">
                    <div id="modalWithStuff" class="ink-modal fade" data-width="80%" data-height="80%" data-trigger="#openModalWithStuffs" role="dialog" aria-hidden="true" aria-labelled-by="modal-title">
                        <div class="modal-header">
                            <button class="modal-close ink-dismiss"></button>
                            <h5 id="modal-title">This Modal is dislayed as soon as the page is fully available</h5>
                        </div>
                        <div class="modal-body">
                            <h1>A tooltip</h1>

                            <span class="ink-tooltip" data-tip-text="A tooltip!!!!1">A tooltip!</span>

                            <hr>

                            <h1>A video</h1>
                            <iframe src="http://rd3.videos.sapo.pt/playhtml?file=http://rd3.videos.sapo.pt/hhl0qEyhOad0aNrZYGvQ/mov/1&quality=sd" frameborder="0" scrolling="no" width="640" height="360"></iframe>
                            <hr>

                            <h1>A datepicker</h1>

                            <input class="ink-datepicker" type="text">

                            <hr>
                        </div>
                        <div class="modal-footer">
                            <div class="push-right">
                                <button class="ink-button blue">Confirm</button>
                                <button class="ink-button red ink-dismiss">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>

                <button id="openModalWithStuffs">Open Modal</button>

                <script>
                    Ink.requireModules(['Ink.UI.Modal_1'], function (Modal) {
                        new Modal('#modalWithStuff');
                    });
                </script>

                <script>
                    Ink.requireModules(['Ink.UI.Modal_1', 'Ink.UI.DatePicker_1', 'Ink.UI.Tooltip_1', 'Ink.Dom.Selector_1', 'Ink.Util.Array_1'], function (Modal, DatePicker, Tooltip, Selector, InkArray) {
                        InkArray.forEach(Selector.select('.ink-tooltip'), function (el) {
                            new Tooltip(el);
                        });
                        InkArray.forEach(Selector.select('.ink-datepicker'), function (el) {
                            new DatePicker(el);
                        });
                    });
                </script>

            </section>
        </div>
    </body>
</html>
